<div style="margin-bottom: 24px;">
  <!--<div class="btn-group" style="margin-top: 3px;">-->
  <!--<div class="btn btn-default" *ngFor="let timeData of timeDataArr" [class.active] = 'timeData.dataType === timeDataType' (click)="timeDataChange(timeData.dataType)">{{timeData.name}}</div>-->
  <!--</div>-->
  <nz-button-group>
    <button nz-button [nzType]="'primary'"  *ngFor="let timeData of timeDataArr" [nzGhost]="timeData.dataType !== timeDataType" nzSize="large" (click)="timeDataChange(timeData.dataType)">
      <span>{{timeData.name}}</span>
    </button>
  </nz-button-group>
  <div style="display: inline-block;margin:0 10px;">
    <label>站点：</label>
    <!--[(ngModel)]="selectedOption"-->
    <nz-select style="min-width: 120px;" [(ngModel)]="rangeCode" nzSize="large"  (nzOpenChange) = 'changeSite($event)'>
      <!--<nz-option nzLabel="&#45;&#45;请选择站点&#45;&#45;" nzValue=""></nz-option>-->
      <nz-option
        *ngFor="let site of siteArr"
        [nzLabel]="site.SITENAME"
        [nzValue]="site.RANGECODE"
      >
      </nz-option>
    </nz-select>
  </div>
  <div style="display: inline-block;margin:10px 0 0 10px;">
    <div style="display: inline-block;">
      <label>开始时间：</label>
      <!--(ngModelChange)="_startDate=$event;_startValueChange()" [ngModel]="_startDate" [nzDisabledDate]="_disabledStartDate" nzShowTime [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'Start date'"-->
      <nz-datepicker
        style="width: 228px;" nzSize="large"
        (ngModelChange)="startDate=$event;startValueChange()"
        [ngModel]="startDate"
        [nzDisabledDate]="disabledStartDate"
        [nzShowTime] = 'showTimeParams'
        [nzFormat]='timeDataType == "hourData"? "YYYY-MM-DD HH:00" : "YYYY-MM-DD"'
        [nzPlaceHolder]="'开始时间'"></nz-datepicker>
    </div>
    <div style="display: inline-block;margin-right: 10px">
      <label>结束时间：</label>
      <nz-datepicker
        style="width: 228px;" nzSize="large"
        (ngModelChange)="endDate=$event;endValueChange()"
        [ngModel]="endDate"
        [nzDisabledDate]="disabledEndDate"
        [nzShowTime] = 'showTimeParams'
        [nzFormat]='timeDataType == "hourData"? "YYYY-MM-DD HH:00" : "YYYY-MM-DD"'
        [nzPlaceHolder]="'结束时间'"></nz-datepicker>
    </div>
    <button nz-button [nzType]="'primary'" nzSize="large" (click)="search()">
      <span>查询</span>
    </button>
  </div>
</div>


<!-- 图表 -->
<div class="row">
  <div class="col-lg-8" id="dataChart"></div>
  <div class="col-lg-4" id="typePie"></div>
  <div class="col-md-12"  id="factorCom" style="width: 100%;height: 500px;margin-top: 20px;"></div>
</div>

<!--正在加载-->
<!--<div class="one-data-loadState-nomodal" *ngIf="isLoading"></div>-->


